<template>
    <div>
        <h2>{{ $t('user.preferences.forum.title') }}</h2>

        <el-form :model="form" label-position="left" label-width="25%" v-loading="loading">
            <el-form-item>
                <template #label>
                    {{ $t('user.preferences.forum.email_digest_type') }}
                    <el-tooltip class="box-item" effect="dark" placement="right">
                        <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                        <template #content>
                            <p>{{ $t('user.preferences.forum.email_digest_tip') }}</p>
                            <ul>
                                <li>{{ $t('user.preferences.forum.email_digest_none_tip') }}</li>
                                <li>{{ $t('user.preferences.forum.email_digest_full_tip') }}</li>
                                <li>{{ $t('user.preferences.forum.email_digest_subject_tip') }}</li>
                            </ul>
                            <p>{{ $t('user.preferences.forum.email_digest_more_tip') }}</p>
                        </template>
                    </el-tooltip>
                </template>
                <el-select v-model="form.email_digest_type">
                    <el-option :label="$t('user.preferences.forum.email_digest_none')" value="0" />
                    <el-option :label="$t('user.preferences.forum.email_digest_full')" value="1" />
                    <el-option :label="$t('user.preferences.forum.email_digest_subject')" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('user.preferences.forum.auto_subscribe')">
                <el-select v-model="form.auto_subscribe">
                    <el-option :label="$t('user.preferences.forum.auto_subscribe_yes')" value="1" />
                    <el-option :label="$t('user.preferences.forum.auto_subscribe_no')" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('user.preferences.forum.nested_view')">
                <el-switch v-model="form.use_nested_discussions" :active-text="$t('user.preferences.forum.yes')" :inactive-text="$t('user.preferences.forum.no')" />
            </el-form-item>

            <el-collapse v-model="collapseName">
                <el-collapse-item :title="$t('user.preferences.forum.track_title')" name="track">
                    <el-form-item :label="$t('user.preferences.forum.track_label')">
                        <el-select v-model="form.track_forums">
                            <el-option :label="$t('user.preferences.forum.track_no')" value="0" />
                            <el-option :label="$t('user.preferences.forum.track_yes')" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <template #label>
                            {{ $t('user.preferences.forum.notify_on_post') }}
                            <el-tooltip class="box-item" effect="dark" :content="$t('user.preferences.forum.notify_on_post_tip')" placement="right">
                                <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                            </el-tooltip>
                        </template>
                        <el-select v-model="form.notify_on_post">
                            <el-option :label="$t('user.preferences.forum.notify_on_post_yes')" value="1" />
                            <el-option :label="$t('user.preferences.forum.notify_on_post_no')" value="0" />
                        </el-select>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>

            <div class="btn-list">
                <el-button @click="submitHandle" color="#F06423">{{ $t('golbal.btn_text_1') }}</el-button>
                <el-button @click="cancleHandle" color="#F06423">{{ $t('golbal.btn_text_3') }}</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

import { useUserStore } from '@/stores/user'
import UserService from '@/api/user'
import type { DiscussionPreference, DiscussionPreferencesValue } from '@/types/user'

const key = 'discussion_preferences'
const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const collapseName = ref('討論區追蹤')

const form = ref<DiscussionPreferencesValue>({
    auto_subscribe: '0',
    email_digest_type: '0',
    use_nested_discussions: false,
    track_forums: '0',
    notify_on_post: '0',
})
const submitHandle = () => {
    loading.value = true
    if (!userStore.userinfoL) return
    UserService.preferenceUpdate(userStore.userinfoL.id, key, form.value).finally(() => {
        loading.value = false
    })
}
const cancleHandle = () => {
    router.go(-1)
}
function getDiscussionPreferences() {
    if (!userStore.userinfoL) return
    loading.value = true
    UserService.preferenceByKey<DiscussionPreference>(userStore.userinfoL.id, key)
        .then(res => {
            form.value = res.value
        })
        .finally(() => {
            loading.value = false
        })
}

watch(
    () => userStore.userinfoL,
    () => {
        getDiscussionPreferences()
    },
)

onMounted(() => {
    getDiscussionPreferences()
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

:deep(.el-form) {
    .el-form-item {
        .el-form-item__label {
            align-items: center;
            justify-content: space-between;

            color: #4c4c4c;
            line-height: 1.2;
        }
    }

    .btn-list {
        display: flex;
        justify-content: center;
    }
}

:deep(.el-collapse) {
    border: none;
    --el-collapse-header-bg-color: #efefef;
    --el-collapse-header-text-color: ;
    --el-collapse-header-font-size: 15px;

    .el-collapse-item {
        margin-bottom: 12px;

        .el-collapse-item__header {
            border: none;
            border-left: 2px solid #f06423;
            padding: 0 15px;
            font-weight: normal;
        }

        .el-collapse-item__wrap {
            border: 1px solid #ebebeb;
            padding: 15px 15px 0;

            .el-collapse-item__content {
                padding-bottom: 0;
            }
        }
    }
}
</style>
